---
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
title: Flickable
description: Flickable element api.
---
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import CodeSnippetMD from '@slint/common-files/src/components/CodeSnippetMD.astro';
import Link from '@slint/common-files/src/components/Link.astro';

```slint playground
export component Example inherits Window {
    width: 270px;
    height: 100px;

    Flickable {
        viewport-height: 300px;
        Text {
            x:0;
            y: 150px;
            text: "This is some text that you have to scroll to see";
        }
    }
}
```

The `Flickable` is a low-level element that is the base for scrollable
widgets, such as the <Link type="ScrollView"/>. When the `viewport-width` or the
`viewport-height` is greater than the parent's `width` or `height`
respectively, the element becomes scrollable. Note that the `Flickable`
doesn't create a scrollbar. When unset, the `viewport-width` and `viewport-height` are
calculated automatically based on the `Flickable`'s children. This isn't the
case when using a `for` loop to populate the elements. This is a bug tracked in
issue [#407](https://github.com/slint-ui/slint/issues/407).
The maximum and preferred size of the `Flickable` are based on the viewport.

When not part of a layout, its width or height defaults to 100% of the parent
element when not specified.


## Pointer Event Interaction

If the `Flickable`'s area contains elements that use `TouchArea` to act on clicking, such as `Button`
widgets, then the following algorithm is used to distinguish between the user's intent of scrolling or
interacting with `TouchArea` elements:

1. If the `Flickable`'s `interactive` property is `false`, all events are forwarded to elements underneath.
2. If a press event is received where the event's coordinates interact with a `TouchArea`, the event is stored
   and any subsequent move and release events are handled as follows:
   1. If 100ms elapse without any events, the stored press event is delivered to the `TouchArea`.
   2. If a release event is received before 100ms have elapsed, the stored press event as well as the
      release event are immediately delivered to the `TouchArea` and the algorithm resets.
   3. Any move events received will start a flicking operation on the `Flickable` if all of the following
      conditions are met:
        1. The event is received before 500ms have elapsed since receiving the press event.
        2. The distance to the press event exceeds 8 logical pixels in an orientation in which we are allowed to move.
      If `Flickable` decides to flick, any press event sent previously to a `TouchArea`, is followed up
      by an exit event. During the phase of receiving move events, the flickable follows the coordinates.
3. If the interaction of press, move, and release events begins at coordinates that do not intersect with
   a `TouchArea`, then `Flickable` will flick immediately on pointer move events when the euclidean distance
   to the coordinates of the press event exceeds 8 logical pixels.

All pointer and mouse events that occur within the bounds of a `Flickable` are intercepted by the `Flickable`
itself and are not propagated to any elements underneath it.

## Wheel/Scroll Event Interaction

The `Flickable` also supports scrolling with the mouse wheel and touchpad scroll gestures.
It will scroll regardless of the `interactive` property.
If the `Flickable` can scroll in the event's direction, the event will be intercepted.
If the Flickable can't scroll in the direction of the event, the event will be forwarded to the parent.

## Properties

### interactive
<SlintProperty propName="interactive" typeName="bool" defaultValue="true">
<CodeSnippetMD imagePath="/src/assets/generated/flickable-interactive.png"  imageWidth="200" imageHeight="200"  imageAlt='flickable interactive'>
```slint
Flickable {
    interactive: false;
}
```
</CodeSnippetMD>
When true, the viewport can be scrolled by clicking on it and dragging it with the cursor.

</SlintProperty>

### viewport-width
<SlintProperty propName="viewport-width" typeName="length">
The total width of the scrollable element.
</SlintProperty>

### viewport-height
<SlintProperty propName="viewport-height" typeName="length">
The total height of the scrollable element.
</SlintProperty>


### viewport-x
<SlintProperty propName="viewport-x" typeName="length">
The position of the scrollable element relative to the `Flickable`. This is usually a negative value.
</SlintProperty>


### viewport-y
<SlintProperty propName="viewport-y" typeName="length">
The position of the scrollable element relative to the `Flickable`. This is usually a negative value.
</SlintProperty>

## Callbacks

### flicked()
Invoked when `viewport-x` or `viewport-y` is changed by a user action (dragging, scrolling).
